<template>
  <Dialog
    v-model="show"
    @close="close"
    :title="$t('feedback.详情')"
    width="600px"
    :hide-footer="true"
  >
    <div class="mb12 flex">
      <div class="mr12 w-100 color-555555 flex-shrink-0 text-right">
        {{ $t('feedback.反馈人') }}：
      </div>
      <div class="color-000000 break-all">{{ data.vipNickName }}</div>
    </div>
    <div class="mb12 flex">
      <div class="mr12 w-100 color-555555 flex-shrink-0 text-right">
        {{ $t('feedback.反馈人手机号') }}：
      </div>
      <div class="color-000000">{{ data.vipPhone }}</div>
    </div>
    <div class="mb12 flex">
      <div class="mr12 color-555555 w-100 flex-shrink-0 text-right">
        {{ $t('feedback.反馈信息') }}：
      </div>
      <div class="color-000000 break-all">{{ data.content }}</div>
    </div>
    
    <div class="flex flex-wrap gap-12 mb12" style="margin-left: 112px; width: 440px;" v-if="data.images">
      <el-image
        v-for="item in data.images.split(',')"
        style="width: 100px; height: 100px"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="data.images.split(',')"
        show-progress
        fit="cover"
        preview-teleported
      />
    </div>
    <div class="mb12 flex">
      <div class="mr12 w-100 color-555555 flex-shrink-0 text-right">
        {{ $t('feedback.反馈时间') }}：
      </div>
      <div class="color-000000">{{ moment(data.createdTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
    </div>

    <div class="mb12 flex" v-if="data.status == 1">
      <div class="mr12 color-555555 w-100 flex-shrink-0 text-right">
        {{ $t('feedback.处理结果') }}：
      </div>
      <div class="color-000000">{{ data.replyContent || '--' }}</div>
    </div>

    <el-form :model="form" label-width="120px" ref="formRef" :rules="rules" v-if="type === 0">
      <el-form-item :label="$t('feedback.处理结果')" prop="reply">
        <el-input v-model="form.reply" type="textarea" :rows="4" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dia-footer flex justify-end" v-if="!hideFooter">
        <el-button @click="close">{{ $t('feedback.关闭') }}</el-button>
        <el-button v-if="type === 0" type="primary" @click="handleSubmit"
          >{{ $t('feedback.处理') }}</el-button
        >
      </div>
    </template>
  </Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import moment from "moment";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const form = ref({
  reply: "",
});
const formRef = ref(null);
const rules = ref({
  reply: [{ required: true, message: t('feedback.请输入处理结果') }],
});
const show = defineModel();
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  type: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["restTable"]);
watch(show, (val) => {
  if (val) {
  }
});
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      Api.feedbackReply({
        id: props.data.id,
        replyContent: form.value.reply,
      }).then((res) => {
        if (res.status == 200) {
          ElMessage.success(t('feedback.处理成功'));
          emit("restTable");
          close();
        }
      });
    } else {
      console.log("error submit!");
    }
  });
};
const close = () => {
  show.value = false;
};
</script>
<style lang="scss" scoped>
.w-100 {
  width: 100px;
}
.color-000000 {
  color: #000000;
}
.color-555555 {
  color: #555555;
}
</style>
